<!-- 关联用户 -->
<template>
	<div class="userinfo u-flex-y-center" @tap="showDetails">
		<u-avatar :size="100" :src="curAccount.gender == '女' ? '/static/avatar/avatar1.png' : '/static/avatar/avatar2.png'"></u-avatar>
		<view class="u-m-l-22 u-flex-sub">
			<view>当前就诊人</view>
			<view class="flex align-center u-m-t-10">
				<view class="name">{{ curAccount.realName || '--' }}</view>
				<image class="sex" src="/static/female.png" v-if="curAccount.gender == '女'"></image>
				<image class="sex" src="/static/male.png" v-else></image>
				<text class="age">{{ getAgeByBirthday(curAccount.birth) }}</text>
			</view>
		</view>
		<view class="exchange u-flex-xy-center" v-if="accountList.length > 1" @tap.stop="exchange">
			<image src="/static/home/exchange.png" mode="widthFix"></image>
			<text>切换</text>
		</view>
	</div>
</template>

<script>
import { getAgeByBirthday } from '@/utils/index.js';
import { getAccountUserList } from '@/service/api.js';
import { mapState } from 'vuex';
export default {
	name: 'accountInfo',
	data() {
		return {};
	},
	computed: {
		...mapState(['curAccount', 'accountList'])
	},
	methods: {
		showDetails() {},
		exchange() {
			this.$Router.push({
				path: '/pages/account/account?isChange=1'
			});
		},
		getAgeByBirthday(strDay) {
			if (strDay) {
				let age = getAgeByBirthday(strDay);
				return age + '岁';
			}
			return '--';
		}
	}
};
</script>

<style scoped lang="scss">
.userinfo {
	color: #1c2023;
	font-size: 24upx;
	z-index: 999;
	margin: 30upx 30upx 0;
	padding: 30rpx;
	position: relative;
	background: #fff;
	border-radius: 16upx;

	.name {
		font-size: 32upx;
		margin-right: 10upx;
		font-weight: 600;
	}
	.sex {
		width: 30upx;
		height: 30upx;
		margin-right: 10upx;
	}

	.age {
		font-size: 30upx;
		color: #36374d;
	}

	.exchange {
		color: #36b7ab;
		font-size: 24upx;
		background: #eafefa;
		padding: 10upx 20upx;
		border-radius: 50upx;
		margin-right: 10upx;

		image {
			width: 32upx;
			height: 32upx;
			display: block;
		}
	}
}
</style>
